<template>
  <view class="login">
    <view class="kongbai"> </view>
    <view class="getuser">
      <view class="getuserHeder">
        <text>头像</text>
        <button
          class="btn"
          open-type="chooseAvatar"
          @chooseavatar="getUserInfo"
        >
          <image
            :src="
              store.userInfo.avatarUrl
                ? store.userInfo.avatarUrl
                : 'https://img2.baidu.com/it/u=2893147358,3393430132&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
            "
            mode="widthFix"
          ></image>
        </button>
      </view>

      <view class="getuserHeder">
        <text>昵称</text>
        <input
          type="nickname"
          class="weui-input"
          placeholder="请输入昵称"
          placeholder-style="font-size:24rpx;color:#ACACAC;text-align: right;"
          style="width: 172rpx; text-align: right"
          :value="store.userInfo.userName"
          @input="onInput"
          @blur="onblur"
        />
      </view>

      <view class="submit">
        <u-button type="primary" text="登录" @click="login"></u-button>
      </view>
    </view>
  </view>
  <!-- 加载动画组件 -->
  <w-loading mask="true" click="true" ref="loading"></w-loading>
</template>

<script setup>
import { ref } from 'vue'
import { userApi } from '@/request/api.js'
import { useCounterStore } from '@/store/counter.js'
import { API_BASE_URL } from '@/config.js'
const store = useCounterStore()
// 用户选择头像
function getUserInfo(e) {
  store.userInfo.avatarUrl = e.detail.avatarUrl
}
// 用户手动修改昵称
function onInput(e) {
  store.userInfo.userName = e.target.value
}
// 用户默认使用微信昵称作为默认昵称
function onblur(e) {
  store.userInfo.userName = e.detail.value
}
//登陆按钮
function login() {
  store.showLoading = true
  uni.login({
    success: (res) => {
      loginApi(res.code)
    },
    fail: (error) => {}
  })
}
async function loginApi(wxCode) {
  const res = await userApi.login({
    code: wxCode
  })
  if (res.code == 1) {
    store.userData = res.data
    if (res.data.status === 1) {
      //下载头像到临时文件
      uni.downloadFile({
        url: store.userInfo.avatarUrl,
        success: (downloadRes) => {
          const tempFilePath = downloadRes.tempFilePath
          // 上传文件到服务器
          uni.uploadFile({
            url: `${API_BASE_URL}/common/appUserAvatar`, //文件上传地址
            filePath: tempFilePath,
            name: 'file',
            header: {
              'content-type': 'multipart/form-data',
              'X-Platform': 'MiniApp', // 小程序端标识必传
              token: 'Bearer ' + store.userData.token
            },
            success: (resImg) => {
              const data = JSON.parse(resImg.data)
              store.userInfo.avatarUrl = data.data
              userApi
                .updateUserInfo({
                  id: store.userData.id,
                  avatar: store.userInfo.avatarUrl,
                  nickname: store.userInfo.userName
                })
                .then((res) => {
                  uni.showToast({
                    title: '登录成功',
                    icon: 'success',
                    mask: true,
                    duration: 1000,
                    success: () => {
                      store.showLoading = false
                      uni.switchTab({
                        url: '/pages/user/index'
                      })
                    }
                  })
                })
            }
          })
        }
      })
    } else {
      console.log(res)
      uni.showToast({
        title: '登录成功',
        icon: 'success',
        mask: true,
        duration: 1000,
        success: () => {
          store.showLoading = false
          uni.switchTab({
            url: '/pages/user/index'
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
/* 去掉背景色和内外边距 */
button {
  margin: 0;
  padding: 0;
  background-color: inherit;
  position: static;
}

button:after {
  content: none;
}

/* 去掉边框 */
button::after {
  border: none;
}
::v-deep .van-button--normal {
  display: flex;
  justify-content: center;
  width: 600rpx;
  height: 80rpx;
  border-radius: 60rpx;
  margin-top: 40rpx;
}
.login {
  background-color: #f5f5f5;
  width: 100%;
  height: 100vh;
  .kongbai {
    padding: 14rpx;
    background-color: #f5f5f5;
  }
  .getuser {
    background-color: #ffffff;
    height: 100vh;
    margin: 0 10rpx;
    .getuserHeder {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 90rpx;
      padding: 0 20rpx;
      border-bottom: 2rpx solid #f5f5f5;
      .btn {
        width: 80rpx;
        height: 80rpx;
        border-radius: 40rpx;
        image {
          width: 100%;
          height: 100%;
        }
      }
    }

    .submit {
      width: 80%;
      margin: 0 auto;
      margin-top: 80rpx;
    }
  }
}
</style>
